<script setup lang="ts">
import { FileListItem } from './interfaces'
import ImageByFileID from '@/components/imgbyfileid/index.vue';
import { View, Delete } from '@element-plus/icons-vue'
interface Props {
  fileInfo: FileListItem,
  width?: string
}
interface Emits {
  (t: 'delete', fileinfo?: FileListItem): void
  (t: 'view', fileinfo?: FileListItem): void
}
const emit = defineEmits<Emits>()
const props = withDefaults(defineProps<Props>(), {
  width: '176px'
})

function handleComplite(e: Event) {
  props.fileInfo.status = ''
}
function handleLoadError(e: Event) {
  props.fileInfo.uploadMsg = '加载失败'
  props.fileInfo.status = 'feild'
}
function handleAction(target: 'delete' | 'view', fileinfo: FileListItem) {
  switch (target) {
    case 'delete':
      emit('delete', fileinfo); break;
    case 'view':
      emit('view', fileinfo); break;
  }
}
</script>
<template>
  <div class="img-preview-item" v-loading="fileInfo.status === 'loading'">
    <div class="actions-wrapper">
      <ElIcon v-if="fileInfo.status !== 'feild'">
        <View @click="handleAction('view', fileInfo)" />
      </ElIcon>
      <ElIcon>
        <Delete @click="handleAction('delete', fileInfo)" />
      </ElIcon>
    </div>
    <!-- v-if="fileInfo.status !== 'feild'"  -->
    <ImageByFileID :style="{ width, height: width }" @error="handleLoadError" :nullvaluetip="fileInfo.uploadMsg"
      @load="handleComplite" :fileid="fileInfo.id" />
    <!-- <div v-else :style="{ width, height: width }" class="upload-error-tip el-image__error">{{
      fileInfo.uploadMsg }}</div> -->
  </div>
</template>
<style lang="less">
.img-preview-item {
  position: relative;
  display: flex;
  width: var(--custom-upload--width);
  height: var(--custom-upload--width);

  .upload-error-tip {
    font-size: .6rem;
    text-align: center;
  }
}

.img-preview-item+.img-preview-item {
  margin-left: .1em;
}

div.img-preview-item .actions-wrapper {
  cursor: initial;
  position: absolute;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  display: none;
  background-color: rgba(0, 0, 0, .6);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  color: white;

  .el-icon {
    cursor: pointer;
    font-size: 1.5em;
  }

  .el-icon+.el-icon {
    margin-left: 1em;
  }
}

div.img-preview-item:hover>.actions-wrapper {
  display: flex;
}
</style>